<template>
  <div style="padding: 10px; width: 100%">
    <el-card style="width: 800px; height: 500px">
      <div>
        <el-form :model="form" ref="form">
          <el-row>
            <el-col span="12">
              <el-form-item label="学号" prop="stuId" label-width="100px">
                <el-input v-model="form.stuId" placeholder="请输入学号" :disabled="true"/>
              </el-form-item>
            </el-col>
            <el-col span="12">
              <el-form-item label="姓名" prop="stuName" label-width="100px">
                <el-input v-model="form.stuName" placeholder="请输入姓名" :disabled="true"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col span="12">
              <el-form-item label="性别" prop="sex" label-width="100px">
                <el-input v-model="form.sex" placeholder="请输入姓名" :disabled="true"/>
              </el-form-item>
            </el-col>
            <el-col span="12">
              <el-form-item label="年龄" prop="age" label-width="100px">
                <el-input v-model="form.age" placeholder="请输入年龄" :disabled="true"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col span="12">
              <el-form-item label="年级" prop="gradeId" label-width="100px">
                <el-tag size="medium" style="width:187px">{{ gradeName }}</el-tag>
              </el-form-item>
            </el-col>
            <el-col span="12">
              <el-form-item label="班级" prop="clazzId" label-width="100px">
                <el-tag size="medium" style="width:187px">{{ clazzName }}</el-tag>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col span="12">
              <el-form-item label="电话" prop="phone" label-width="100px">
                <el-input
                    v-model="form.phone"
                    placeholder="请输入电话"
                    :disabled="true"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import request from '../../utils/request';

export default {
  name: "List",
  data() {
    return {
      form: {},
      user: {},
      gradeName: '',
      clazzName: ""
    };
  },
  computed() {

  },
  created() {
    let str = sessionStorage.getItem("user") || "{}"
    this.user = JSON.parse(str)
    console.log(this.user);
    this.load()
  },
  methods: {
    load() {
      request
          .get("/student/person", {
            params: {
              studentId: this.user.account
            },
          })
          .then((res) => {
            console.log(res);
            this.form = res.data.records[0];
            this.gradeName = res.data.records[0].gradeList[0].name
            this.clazzName = res.data.records[0].clazzList[0].name
          });
    },
  }
};
</script>

